<template>
  <div class="sideBar">
    <el-menu
      @select="toView"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
    >
      <template v-for="(config, index) in menuConfig">
        <el-submenu
          v-if="config.type === 'subMenu'"
          :index="config.indexName"
          :key="index"
        >
          <template slot="title">
            <i :class="config.icon"></i>
            <span>{{ config.title }}</span>
          </template>

          <template v-for="(subConfig, sin) in config.items">
            <el-menu-item-group v-if="subConfig.type === 'group'" :key="sin">
              <template slot="title">
                <i :class="subConfig.icon"></i>
                <span>{{ subConfig.title }}</span>
              </template>
              <el-menu-item
                v-for="(item, index) in subConfig.items"
                :key="index"
                :index="item.routeName"
                >{{ item.title }}</el-menu-item
              >
            </el-menu-item-group>

            <el-menu-item
              v-else-if="subConfig.type === 'item'"
              :index="subConfig.routeName"
              :key="sin"
              >{{ subConfig.title }}</el-menu-item
            >
          </template>
        </el-submenu>

        <el-menu-item
          v-else-if="config.type === 'item'"
          :index="config.routeName"
          :key="index"
          >{{ config.title }}</el-menu-item
        >
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "ocn-side-bar",
  props: {
    menuConfig: {
      type: Array,
      default: () => {
        return [
          {
            type: "subMenu",
            indexName: "home",
            title: "示例演示页面",
            icon: "el-icon-menu",
            items: [
              {
                type: "group",
                title: "网络方法示例",
                icon: "el-icon-s-help",
                items: [
                  {
                    type: "item",
                    title: "单个请求",
                    icon: "",
                    routeName: "subView1",
                  },
                  {
                    type: "item",
                    title: "多请求并发同步",
                    icon: "",
                    routeName: "subView2",
                  },
                ],
              },
              {
                type: "group",
                title: "vuex方法示例",
                icon: "el-icon-s-help",
                items: [
                  {
                    type: "item",
                    title: "vuex状态修改",
                    icon: "",
                    routeName: "subView3",
                  },
                  {
                    type: "item",
                    title: "vuex状态获取",
                    icon: "",
                    routeName: "storeTest",
                  },
                ],
              },
              {
                type: "group",
                title: "组件示例",
                icon: "el-icon-s-help",
                items: [
                  {
                    type: "item",
                    title: "测试图表",
                    icon: "",
                    routeName: "echartsTest",
                  },
                  {
                    type: "item",
                    title: "基础表单",
                    icon: "",
                    routeName: "formTest",
                  },
                  {
                    type: "item",
                    title: "基础列表",
                    icon: "",
                    routeName: "tableTest",
                  },
                  {
                    type: "item",
                    title: "测试dialog",
                    icon: "",
                    routeName: "dialogTest",
                  },
                ],
              },
              {
                type: "group",
                title: "组件示例",
                icon: "el-icon-s-help",
                items: [
                  {
                    type: "item",
                    title: "测试arcgisMap",
                    icon: "",
                    routeName: "arcMap",
                  },
                  {
                    type: "item",
                    title: "测试olMap",
                    icon: "",
                    routeName: "olMap",
                  },
                ],
              },
              {
                type: "group",
                title: "流媒体组件",
                icon: "el-icon-s-tools",
                items: [
                  {
                    type: "item",
                    title: "测试easyWasmPlayer",
                    icon: "",
                    routeName: "videoTest",
                  },
                ],
              },
            ],
          },
          {
            type: "subMenu",
            indexName: "system",
            title: "系统操作",
            icon: "el-icon-switch-button",
            items: [
              {
                type: "group",
                title: "系统操作",
                icon: "el-icon-s-tools",
                items: [
                  {
                    type: "item",
                    title: "退出系统",
                    icon: "",
                    routeName: "/login",
                  },
                ],
              },
            ],
          },
        ];
      },
    },
  },
  data() {
    return {
      isCollapse: true,

      showTitle: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    toPage(subPath) {
      if (subPath.indexOf("/") != -1) {
        this.$utils.rout("to", subPath, { testQuery: subPath });
      } else {
        let path = this.$utils.insertPathParams("/home", {
          param1: subPath,
        });
        this.$utils.rout("to", path, { testQuery: subPath });
      }
    },

    toView(key, keyPath) {
      let _this = this;
      this.$utils.setConsole(key, keyPath);
      this.$utils.antiShake(
        () => {
          _this.toPage(key);
        },
        "subView1",
        300
      );
    },
    handleOpen(key, keyPath) {
      this.$utils.setConsole(key, keyPath);
    },
    handleClose(key, keyPath) {
      this.$utils.setConsole(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.sideBar {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.el-menu {
  height: 100%;
  // min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.el-menu:not(.el-menu--collapse) {
  height: 100%;
}
</style>
